<extend name="./Application/Common/View/block/base.php" />
<block name="header">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/font-awesome.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="__PUBLIC__/assets/css/colorbox.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadfy/uploadify.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/Scoreanal/exam_upload.css" />
</block>
<block name="bdoy">
    <body>

        <form>
            <div class="chrage-line">
                <input id="file_upload" name="file_upload" type="file" multiple="true" value="" />
                <input type="hidden" name="exam" value="{:$_GET['id']}"/>
            </div>
            <div id="gallery">
                <ul class="ace-thumbnails clearfix">
                    <volist name="file_list" id="file">
                        <li id="li_{$file['id']}">
                            <a href="#" data-rel="colorbox">
                                <img width="150" height="130" src="/Public/img/excel_icon.png" />
                                <div class="text">
                                    <div class="inner">下方可以删除</div>
                                </div>
                                <div class="tags">
                                    <span class="label-holder white">
                                        <span class="label label-danger">{$file['comment']}</span>
                                    </span>
                                </div>
                            </a>

                            <div class="tools tools-bottom">
                                <a title="删除" href="javascript:del_img({$file["id"]})">
                                <i class="ace-icon fa fa-times red"></i>
                                </a>
                            </div>
                        </li>
                    </volist>
                </ul>
            </div>
        </form>


    </body>
</block>
<block name="footExtendJs">
    <script src='__PUBLIC__/assets/js/jquery.js'></script>
    <script type="text/javascript" src="__PUBLIC__/uploadfy/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#file_upload').uploadify({
                'swf'      : '__PUBLIC__/uploadfy/uploadify.swf',
                'uploader' : '__URL__/uploadify?id={:$_GET['id']}',
                'buttonText' : '{:LANG('upload')}',
                'onUploadSuccess' : function(file, data, response) {
                    add_img(data);
                }
            });
        });
    </script>
    <script>
        function add_img(path){
            path = eval("(" + path + ")");
            var str =' <li id="li_'+path.id+'"><a href="#" data-rel="colorbox">' +
                '<img width="150" height="130" src="/Public/img/excel_icon.png" />' +
                '<div class="text"><div class="inner">{:LANG('bottom_can_del')}</div></div>' +
            '<div class="tags"><span class="label-holder white"><span class="label label-danger">'+path.comment+'</span></span></div></a>' +
                '<div class="tools tools-bottom"><a title="{:LANG('del')}" href="javascript:del_img(\''+path.id+'\')">' +
                '<i class="ace-icon fa fa-times red"></i></a></div></li>';
//            str += '<input type="hidden" id="input_'+path.id+'" value="'+path.path+'" name=path[]/>';
            var append_id = '#gallery ul';
            $(append_id).append(str);
        }

        function del_img(id){
            $("#li_"+id).remove();
//            $("#input_"+id).remove();
            var url = '__URL__/del_upload_file?id='+id;
            $.get(url, function(data){});
        }
    </script>
    <script src="__PUBLIC__/assets/js/jquery.colorbox.js"></script>
    <script type="text/javascript">
        jQuery(function($) {
            var $overflow = '';
            var colorbox_params = {
                rel: 'colorbox',
                reposition:true,
                scalePhotos:true,
                scrolling:false,
                previous:'<i class="ace-icon fa fa-arrow-left"></i>',
                next:'<i class="ace-icon fa fa-arrow-right"></i>',
                close:'&times;',
                current:'{current} of {total}',
                maxWidth:'100%',
                maxHeight:'100%',
                onOpen:function(){
                    $overflow = document.body.style.overflow;
                    document.body.style.overflow = 'hidden';
                },
                onClosed:function(){
                    document.body.style.overflow = $overflow;
                },
                onComplete:function(){
                    $.colorbox.resize();
                }
            };

            $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
            $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


            $(document).one('ajaxloadstart.page', function(e) {
                $('#colorbox, #cboxOverlay').remove();
            });
        });
    </script>
    <!--图片特效-->
</block>
